import React, { Component } from 'react';
import { Modal, Form, message, Radio, Card, Row, InputNumber, Tree } from 'antd';

const { TreeNode } = Tree;
const FormItem = Form.Item;
const RadioGroup = Radio.Group;
export default class SetBright extends Component {
  state = {
    devIdArray: this.props.selectedRows,
    brightnessVal: 1,
  };
  onCheck = checkedKeys => {
    //console.log('selectkeys', checkedKeys);
    this.setState({ devIdArray: checkedKeys });
  };
  onChange = brightnessVal => {
    this.setState({
      brightnessVal,
    });
  };
  handleSet = () => {
    this.props.form.validateFields((err, values) => {
      if (!err) {
        const { selectedRows, dispatch } = this.props;
        const { brightnessVal, setBrightnessMod } = values;
        //const devIds = selectedRows.join(',');
        const devIds = this.state.devIdArray.join(',');
        if (setBrightnessMod === 3) {
          dispatch({
            type: 'dev/timingSetBrightness',
            payload: { devIds },
            callback: () => {
              message.success('设置定时亮度成功.');
            },
          });
        } else {
          dispatch({
            type: 'dev/setBright',
            payload: { devIds, setBrightnessMod, brightnessVal },
            callback: () => {
              message.success('设置亮度成功.');
            },
          });
        }

        this.props.handleModalVisible(false);
      }
    });
  };

  render() {
    const { modalVisible, form, handleModalVisible, selectedRows } = this.props;
    return (
      <Modal
        title="设置亮度"
        visible={modalVisible}
        onOk={this.handleSet}
        onCancel={() => handleModalVisible(false)}
      >
        <Form>
          <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="类型">
            {form.getFieldDecorator('setBrightnessMod', {
              initialValue: 0,
              rules: [{ required: true, message: '请选择类型...' }],
            })(
              <RadioGroup>
                <Radio value={0}>手动设置</Radio>
                {/* <Radio value={1}>自动调节(需接入亮度传感器)</Radio>
                <Radio value={2}>动态调节（时间天气）</Radio> */}
                <Radio value={3}>定时设置亮度</Radio>
              </RadioGroup>
            )}
          </FormItem>
          <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="亮度值">
            {form.getFieldDecorator('brightnessVal', {
              initialValue: 10,
              rules: [{ required: true, message: '请选择类型...' }],
            })(<InputNumber min={1} max={64} />)}
          </FormItem>
        </Form>
        <Row style={{ width: '100%' }}>
          <Card title="设备列表（多选）" bodyStyle={{ height: 600, overflow: 'scroll' }}>
            {selectedRows.length ? (
              <Tree
                checkable
                style={{ height: 600 }}
                defaultCheckedKeys={selectedRows}
                onCheck={this.onCheck}
              >
                {selectedRows.map(data => (
                  <TreeNode title={data} key={data} />
                ))}
              </Tree>
            ) : (
                'loading tree'
              )}
          </Card>
        </Row>
      </Modal>
    );
  }
}
